<template>
  <div class="reports">
    <mianbaoxie />
    <el-card class="box-card">
      <div ref="main" style="width:80%;height:376px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import mianbaoxie from "@/components/mianbaoxie.vue";
import { initreports } from "@/ulits/api/reports";
export default {
  components: { mianbaoxie },
  name: "reports",
  mounted() {
    initreports().then((res) => {
      this.Message(res);
      console.log(res.data.series);
      res.data.xAxis.type = "category";
      res.data.xAxis.boundaryGap = false;
      res.data.series.forEach((element) => {
        // element.label = {
        //   show: true,
        //   position: "top",
        // };
        element.emphasis = {
          focus: "series",
        };
      });
      this.initecharts(
        res.data.legend,
        res.data.series,
        res.data.xAxis,
        res.data.yAxis
      );
    });
  },
  methods: {
    // echarts 图表
    initecharts(legend, series, xAxis, yAxis) {
      // console.log(legend, series, xAxis, yAxis);
      var myChart = echarts.init(this.$refs.main);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: legend,
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
      });
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.reports {
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>